<template>
  <div class="multimedia">
    <serch :formInline="formInline" :options="options" v-on:serchFormInline="serchFormInline" :name="name" :title="title"></serch>
    <div class="checkTable">
      <div class="ct_title">
        多媒体列表
      </div>
      <div class="ct_button">
        <el-button type="primary" @click="showUpload" class="upload">上传文件</el-button>
        <el-button @click="showTips" class="del">修改标签</el-button>
        <el-button @click="deleteLists" class="del">批量删除</el-button>
      </div>
    </div>
    <div class="tableBox">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        :header-cell-style="{background:'#efefef', color:'#000'}"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55"
          fixed>
        </el-table-column>
        <el-table-column
          label="缩略图"
          min-width="80">
          <template slot-scope="scope">
            <img style="width:50px;height:50px" :src="scope.row.thumbnailPath" alt="" @click="showPreviewShade(scope.$index, scope.row)">
          </template>
        </el-table-column>
        <el-table-column
          prop="fileName"
          label="文件名称"
          min-width="130">
        </el-table-column>
        <el-table-column
          prop="labels"
          label="标签"
          min-width="125">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.labels" :key="index">
                <el-tag style="margin-right:5px">{{item}}</el-tag>
            </span>
          </template>
        </el-table-column>

        <el-table-column
          prop="mediaType"
          label="媒体类型"
          show-overflow-tooltip
          min-width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.mediaType == 1">
              视频
            </div>
            <div v-if="scope.row.mediaType == 2">
              音频
            </div>
            <div v-if="scope.row.mediaType == 3">
              图片
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="上传时间"
          show-overflow-tooltip
          min-width="120">
        </el-table-column>
        <el-table-column
          label="操作"
          fixed='right'
          min-width="80">
          <template slot-scope="scope">
              <el-button 
                type="text"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
      
      <div class="shadeBac" ref="shadeBac" v-show="shade"></div>
      <div class="shadeUpdata"  v-show="shadeUpdata">
            <i class="el-icon-close closeUpdata" @click="closeUpdata"></i>
            <div class="title">
                上传文件
            </div>

            <div class="setTips">
                <div class="left">
                    添加标签：
                </div>
                <div class="right">
                    <div class="sttop">
                        <el-tag
                            :key="tag"
                            v-for="tag in dynamicTags"
                            closable
                            type="info"
                            :disable-transitions="false"
                            @close="handleClose(tag)">
                            {{tag}}
                        </el-tag>
                        <el-input
                            class="input-new-tag"
                            maxlength="6"
                            v-if="inputVisible"
                            v-model.trim="inputValue"
                            ref="saveTagInput"
                            size="small"
                            @keyup.enter.native="handleInputConfirm"
                            @blur="handleInputConfirm">

                        </el-input >
                        
                        <el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button>
                    </div>
                    <div class="rules">
                      *命名规则：文件类型-对象名-对象特征 例：图片 托尼 正面
                    </div>
                    
                </div>
            </div>
            <div class="updata">
              <el-upload
                ref='upload'
                class="upload-demo"
                action=""
                :on-change="handleChange"
                multiple
                :before-upload="beforeAvatarUpload"
                :show-file-list="false"
                :file-list="fileList"
                :http-request='uploadFile'
                accept='image/jpg,image/jpeg,image/png,audio/wav,video/mp4'>
                <el-button size="small" class="upload" icon="el-icon-plus">点击上传</el-button>
                 <div slot="tip" class="el-upload__tip">支持文件类型 ( 视频: mp4,音频: wav,图片: jpg、png)</div>
              </el-upload>   

               <el-table
                :data="uploadFileList"
                style="width: 100%;height:250px;overflow:auto;">
                <el-table-column
                  prop="name"
                  label="文件信息"
                  width="250">
                  <template slot-scope="scope">
                    <div class="urlSet">
                      <span>{{scope.row.name}}</span>
                    </div>

                    <div>
                      <el-progress v-show="!(scope.row.percentage == 100)" :stroke-width="4" :text-inside="true" :percentage="scope.row.percentage"></el-progress>
                    </div>
                  </template>
                </el-table-column>
                  
                <el-table-column
                  prop="tips"
                  label="标签">
                  <template slot-scope="scope">
                    <el-tag v-for="(item,index) in scope.row.tips" :key="index">
                      {{item}}
                    </el-tag>
                    <!-- <div>
                      {{scope.row.tips}}
                    </div> -->
                  </template>
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="状态"
                  width="150">
                  <template slot-scope="scope">
                    <p  class="status-text" v-if="scope.row.status === 'ready'">
                      <i class="el-icon-loading"></i>
                      <span>上传中</span>
                    </p>

                    <p  class="status-text" v-if="scope.row.status === 'success'">
                      <i class="el-icon-circle-check" style="color:#5BFFB4;font-size: 22px;"></i>
                      <span>{{scope.row.message}}</span>
                    </p>
                    <!-- <p  class="status-text" v-if="scope.row.status === 'fail'">
                      <i class="el-icon-circle-close" style="color:#FF1E1E;font-size: 22px;"></i>
                      <span>上传失败</span>
                    </p> -->
                    <p  class="status-text" v-if="scope.row.status === 'fail'">
                      <i class="el-icon-circle-close" style="color:#FF1E1E;font-size: 22px;"></i>
                      <span>{{scope.row.message}}</span>
                    </p>

                    <p  class="status-text" v-if="scope.row.status === 'uploading'">
                      <i class="el-icon-loading"></i>
                      <span>上传中</span>
                    </p>

                  </template>
                </el-table-column>
              </el-table>  

              
            </div>
      </div>
      <div class="shadeTips"  v-show="shadeTips">
          <i class="el-icon-close closeTips" @click="closeTips"></i>
          <div class="title">
              修改标签
          </div>
          <div class="container">
            <el-form  ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="修改标签: " prop="value">
                <div class="listsBox">
                  <div v-for="(item,index) in changeTips" :key="index" style="marginBottom:10px">
                    <el-input maxlength="6" class="tiplists" v-model.trim="changeTips[index]" placeholder="请输入标签"></el-input>
                    <el-button icon="el-icon-minus" size="mini" circle @click="delate(index)" class="del" ></el-button>
                  </div>
                </div>
                
              </el-form-item>
              
              <el-form-item>
                <el-button class="addTips upload" @click="addChangeTips">+ 添加标签</el-button>
              </el-form-item>
              <el-form-item>
                <!-- <el-button @click="bacTips">返回</el-button>
                <el-button type="primary" @click="sureTips('ruleForm')">确定</el-button> -->
              </el-form-item>
            </el-form>
          </div>
          <div class="st_bottom">
            <el-button @click="bacTips" class="del">返回</el-button>
            <el-button type="primary" @click="sureTips('ruleForm')" class="upload">确定</el-button>
          </div>
            
      </div>


    <div class="previewShade" v-show="previewShade" @click="closePreviewShade"> 
      <i class="el-icon-close close" @click="closePreviewShade"></i>
    </div>
    <div class="previewShadeMain" v-show="previewShade">
      <video :src="previewSrc" v-if="type == 0" class="preview" controls/>
      <audio :src="previewSrc" alt="" v-else-if="type == 1" class="preview" controls/>
      <img :src="previewSrc" alt="" v-if="type == 2" class="preview" />
    </div>
  </div>
</template>

<script>
import serch from '../../components/serch.vue'
import imgCross from '../../assets/images/multimedia/cross.png'
import imgSuccess from '../../assets/images/multimedia/success.png'
import imgBad from '../../assets/images/multimedia/bad.png'
import SparkMD5 from 'spark-md5'
import qs from 'qs'
import { upload,multimedia,multimediaDelate,multimediaAlter ,parseFile ,getMultimediaListByDatabase} from '../../api/index'
export default {
  components:{
    serch
  },
  data(){
    return{
      name:'文件名称',
      title: '媒体类型',
      token:'',
      // 初始化
      pageNum:1,
      pageSize: 10,
      total: 0, 
      formInline: {
        fileName: '',
        mediaType: ''
      },
      tableData: [],
      options: [{
        value: '1',
        label: '视频'
      }, {
        value: '2',
        label: '音频'
      }, {
        value: '3',
        label: '图片'
      },],
      
      shade:false,
      shadeUpdata:false,
      shadeTips:false,
      previewShade:false,
      previewSrc:'',
      type:0,
      multipleSelection: [],
      
      // 上传
      dynamicTags: ['标签一', '标签二'],
      inputVisible: false,
      inputValue: '',
      imgSuccess: imgSuccess,
      imgBad:imgBad,
      imgCross:imgCross,
      fileList: [],
      uploadFileList:[],
      progressPercent:0,
      allMd5:[],
      allFileList:[],
      lock:true,
      leng:0,

      // 修改
      changeTips:[''],

      //删除
      ids:[],
      
    }
  },
  created(){
    this.init()
    this.token = sessionStorage.getItem('token')
  },
  methods:{
    init(){
      let a = []
      let pageNum = this.pageNum
      let pageSize = this.pageSize
      
      let fileName = this.formInline.fileName
      let mediaType = this.formInline.mediaType
      let params = {pageNum,pageSize,fileName,mediaType}
      getMultimediaListByDatabase(params).then(res=>{
        if(res.data.message == "success"){
          let re = res.data.data.object
          // re.forEach(el=>{
          //   let filePath = String(el.thumbnailPath)
          //   parseFile(filePath,this.token).then(arr=>{
          //     el.thumbnailPath = arr.data.data
          //   })

            
          // })
          this.tableData = re
          this.total = res.data.data.count
        }
      })
    },
    showPreviewShade(index,res){
      
      this.previewShade = true
      // previewSrc
      // type
      this.previewSrc = res.sourcePath
      if(res.originalFileName.split('.')[1] == 'mp4'){
        this.type = 0
      }else if(res.originalFileName.split('.')[1] == 'wav'){
        this.type = 1
      }else if(res.originalFileName.split('.')[1] == 'jpg' || res.originalFileName.split('.')[1] == 'jpeg' || res.originalFileName.split('.')[1] == 'png'){
        this.type = 2
      }
    },
    closePreviewShade(){
      this.previewShade = false
    },
    serchFormInline(e) {
      console.log(e)
      
      this.pageNum = 1
      this.pageSize = 10
      this.formInline.labels = e.fileName
      this.formInline.mediaType =  e.mediaType
      this.init()
    },
    handleSelectionChange(e){
      this.multipleSelection = e
    },
    GoEvidenceadd(){
      this.$router.push('/home/evidence/evidenceadd')
    },
    handleDelete(index,item){
      this.$confirm('此操作将永久删除此条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: "confirm"
        }).then(() => {
          let ids = [item.id]
          let params = {ids}
          multimediaDelate(params).then(res=>{
            if(res.data.message == 'success'){
              this.init()
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.$refs.multipleTable.clearSelection();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });        
          this.$refs.multipleTable.clearSelection();
          this.multipleSelection = []   
        });
    },
    deleteLists(){
      if(this.multipleSelection.length == 0){
        this.$message.error('请先选择需要删除的数据');
      }else{
        this.$confirm('此操作将永久删除选中数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: "confirm"
        }).then(() => {
          let ids = [ ]
          this.multipleSelection.forEach(el=>{
            ids.push(el.id)
          })
          let params = {ids}
          multimediaDelate(params).then(res=>{
            if(res.data.message == 'success'){
              this.init()
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.$refs.multipleTable.clearSelection();
            }
          })
        }).catch(() => {
          this.$refs.multipleTable.clearSelection();
          this.$message({
            type: 'info',
            message: '已取消删除',
          });          
        });
      }
    },
    handleSizeChange(val) {
      this.pageNum = 1
      this.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.init()
    },
    // 上传
    showUpload(){
      this.shade = true
      this.shadeUpdata = true
    },
    closeUpdata(){
      this.fileList = [],
      this.uploadFileList = [],
      this.shade = false
      this.shadeUpdata = false     
    },


    beforeAvatarUpload(file) {
      console.log(file.size)
      let size = (file.size / 1024 / 1024) <= 200 ? true : false
      console.log(this.uploadFileList)
      if(!size){
        this.uploadFileList.forEach((el,index)=>{
          if(el.uid == file.uid){
            el.status = 'fail'
            el.message = '文件超出200M'
            // if(res.data.data){
            el.tips = []
            el.percentage =  100
            // }
            
          }
        })
      }
      // let that = this
      // let Type = ['image/jpeg' , 'image/png' ,'audio/wav' , 'video/mp4']
      // let isType = true
      // let isMd5 = true
      // console.log(Type.indexOf(file.type))
      // if(Type.indexOf(file.type) == -1 ){
      //   if(that.lock){
      //     this.$message.error('上传文件中含有重复或不符合条件的文件,重复或不符合条件的文件已自动删除！')
      //     that.lock = false

      //     setTimeout(()=>{
      //       that.lock = true
      //     },2000)
      //   }
      // }
      // return true
      // let md5True = true
      // await this.checkMd5(file).then(res => {
      //   md5True = that.allMd5.indexOf(res)
      //   if(md5True == 0){
      //     if(that.lock){
      //       that.$message.error('上传文件中含有重复或不符合条件的文件,重复或不符合条件的文件已自动删除！')
      //       that.lock = false
      //       setTimeout(()=>{
      //         that.lock = true
      //       },2000)
      //       isMd5 = false
      //     }
      //   }else{
      //     that.allMd5.push(res)
      //     md5True = true
      //   }
      // })

      return size
      
      
    },

    checkMd5(file){
      return new Promise(function (resolve, reject) {
        let that = this
        let md5 
        let md5True = true
        var Spark=new SparkMD5.ArrayBuffer()

        let reader = new FileReader()
        reader.readAsArrayBuffer(file)
        reader.onload =  function (e) {
            Spark.append(e.target.result)
            md5 = Spark.end()
            resolve(md5);
        }
      })
    },
    
    handleChange(file, fileList) {
      this.uploadFileList.unshift(file)
    },
    
    uploadFile(param){
        let that = this
        const files = param.file
        let config = {
          onUploadProgress: function(progress) {
            this.uploadFileList.forEach((el,index)=>{
              if(el.uid == files.uid){
                el.percentage =  Math.round( (progress.loaded * 100) / progress.total)
              }
            })
          }.bind(this)
        };
        
        let params = new FormData()
        params.append('file', files)
        params.append('labels', this.dynamicTags)
        
        upload(params,config).then((res)=>{
          console.log(res)
          if(res.data.message == "success"){
            that.uploadFileList.forEach((el,index)=>{
              if(el.uid == files.uid){
                el.status = 'success'
                el.message = '上传成功'
                // if(res.data.data){
                el.tips = (res.data.data.label).split(',')
                // }
                
              }
            })
            this.init()
          }else{
            that.uploadFileList.forEach((el,index)=>{
              if(el.uid == files.uid){
                el.status = 'fail'
                el.message = res.data.message
                el.tips = res.data.data.label
              }
            })
             
          }
        })
        // .catch(()=>{
        //   // console.log('2222222222')
        //   that.uploadFileList.forEach((el,index)=>{
        //       if(el.uid == files.uid){
        //         el.status = 'fail'
        //         el.message = '上传失败'
        //       }
        //     })
        // })
        console.log(that.uploadFileList)
      
    },

    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },

    //修改 
    showTips(){
      if(this.multipleSelection.length == 0){
        this.$message.error('请先选择修改标签的数据');
      }else{
        this.shade = true
        this.shadeTips = true
        this.changeTips = ['']
      }
      
    },
    closeTips(){
      this.shade = false
      this.shadeTips = false
       this.changeTips = []
    },
    addChangeTips(){
      this.changeTips.push('')
    },
    delate(index){
      this.changeTips.splice(index,1)
    },
    bacTips(){
      this.changeTips = []
      this.shade = false
      this.shadeTips = false
    },
    sureTips(){
      
      this.changeTips.forEach((el,index)=>{
        if(el == ''){
          this.$message.error('请输入完整标签')
          throw Error();
        }
      })
      let ids = []
      let labels = this.changeTips
      this.multipleSelection.forEach(res=>{
        ids.push(res.id)
      })
      let params = { ids, labels}
      multimediaAlter(params).then(res=>{
        if(res.data.message == "success"){
          this.shade = false
          this.shadeTips = false
          this.multipleSelection = []  
          let pageNum = 1
          let pageSize = 10
          let fileName = this.fileName
          let mediaType = this.mediaType
          let params = {pageNum,pageSize,fileName,mediaType}
          multimedia(params).then(res=>{
            if(res.data.message == "success"){
              let re = res.data.data.object
              this.tableData = re
              this.total = res.data.data.count
            }
          })
        }else{
          this.$message.error('错误');
        }
      })
      
      // this.shade = false
      // this.shadeTips = false
    } ,

  }
}
</script>

<style lang='less' scoped>
.multimedia{
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  background-color: #1D1F2C;
  height: calc(100vh - 108px);
  overflow: auto;
  ::-webkit-scrollbar {
      width:2px;
  }
  ::-webkit-scrollbar-track {
      -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
      border-radius:10px;
  }
  ::-webkit-scrollbar-thumb {
      border-radius:10px;
      background:rgba(0,0,0,0.1);
      -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
  }
  ::-webkit-scrollbar-thumb:window-inactive {
      background:#999;
  }
  .upload{
    color: #63E9FF;
    border: 1px solid #00CEF0;
    background-color: rgba(49, 203, 236, 0.1400);
    border-radius: 2px;
  }
  .del{
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 2px;
  }
  /deep/.el-tag {
    border-radius: 2px;
  }
  /deep/.el-button--mini, .el-button--small {
    border-radius: 2px;
  }
  .checkTable{
    background-color: #282C41;
    color: #fff;
    padding: 5px 15px;
    margin-top: 20px;
    border-left: 4px solid #04D4FF;
    background-image: url('../../assets/images/mouId/liang.png');
    background-repeat: no-repeat;
    background-size: contain ;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ct_title{
      font-size: 20px;
    }
    .ct_button{
      .newAdd{
        color: #63E9FF;
        border: 1px solid #00CEF0;
        background-color: rgba(49, 203, 236, 0.1400);
        border-radius: 2px;
      }
      .delate{
        background-color: transparent;
        border: 1px solid #fff;
        color: #fff;
        border-radius: 2px;
      }
    }
    
  }
  .tableBox{
    padding: 0 10px;
    background-color: #282C41;
    /deep/.el-table .el-table__cell {
      padding: 8px 0;
    }
    /deep/.el-table th.el-table__cell {
        background: #4F5367!important;
        color: #fff!important;
    }
    /deep/.el-table tr {
        background-color: #3C4052;
        color: #fff;
    }
    /deep/.el-table th.el-table__cell>.cell {
      border-right: 1px solid #fff;
      padding-left: 14px!important;
    }
    /deep/.el-table th.el-table__cell:last-child >.cell {
      border-right: 0;
    }
    /deep/.el-table th.el-table__cell:first-child >.cell {
      border-right: 0;
    }
    /deep/.el-table_body tr.hover_row>td.el-table_cell{
      background-color: red!important;
    }
    /deep/.el-button--text {
      color: #3FC1FF;
    }

    /deep/.el-tag {
        color: #63E9FF;
        background: linear-gradient(270deg, #3A6176 0%, #38768D 100%);
        border: none;
        border-radius: 2px;
    }
    /deep/.el-table__body-wrapper {
      background-color: #3C4052;
    }
    
  }
   tbody tr:hover>td,/deep/ tbody tr.hover-row>td { background-color: rgba(63,193,255,0.2000) }
  
  .block{
    padding: 20px 0;
    background-color: #282C41;
    /deep/.el-pagination{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 15px;
    }
    /deep/.el-pagination__total {
      color: #fff;
    }
    /deep/.el-input__inner {
      color: #fff;
      background-color: transparent;
    }
    /deep/.el-pagination.is-background .el-pager li {
      margin: 0 5px;
      background-color: transparent;
      color: #fff;
      min-width: 30px;
      border-radius: 2px;
      border: 1px solid #fff;
    }
    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: rgba(5, 190, 223, 0.14);
      color: #00BEDF;
      border: 1px solid #00BEDF;
    }
    /deep/.btn-prev {
       background-color: transparent;
      color: #FFF;
      border: 1px solid #fff;
    }
    /deep/.btn-next{
      background-color: transparent;
      color: #FFF;
      border: 1px solid #fff;
    }
    /deep/.el-pagination__jump {
      margin-left: 24px;
      font-weight: 400;
      color: #fff;
    }
  }
  .shadeBac{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: .5;
      z-index: 99;
  }
  .shadeUpdata{
      position: absolute;
      width: 650px;
      height: 500px;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background-color: #282C41;
      color: #fff;
      z-index: 100;
      border-radius: 3px;
      ::-webkit-scrollbar {
          width:2px;
      }
      ::-webkit-scrollbar-track {
          -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
          border-radius:10px;
      }
      ::-webkit-scrollbar-thumb {
          border-radius:10px;
          background:rgba(0,0,0,0.1);
          -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
      }
      ::-webkit-scrollbar-thumb:window-inactive {
          background:#999;
      }
      .closeUpdata{
          position: absolute;
          right: 15px;
          top: 15px;
          font-size: 22px;
      }
      .title{
          width: 100%;
          height: 50px;
          border-bottom:1px solid #2F86A1 ;
          line-height: 50px;
          padding-left: 20px;
          font-weight: 400;
          box-sizing: border-box;
      }
      .setTips{
          width: 100%;
          height: 100px;
          padding: 20px 30px 10px;
          box-sizing: border-box;
          display: flex;
          background-image: url('../../assets/images/linebright.png');
          background-repeat: no-repeat;
          background-size: 100%;
          .left{
            width:90px;
            font-size: 15px;
          }
          .right{
              display: flex;
              flex-direction: column;
              flex: 1;
              .sttop{
                >span{
                  margin: 0 5px 2px;
                  background-color: #4A4D5F;
                  border: none;
                  color: #fff;
                  border: 1px solid #4A4D5F;
                  -webkit-user-select:none;/*谷歌 /Chrome*/
                  -moz-user-select:none; /*火狐/Firefox*/
                  -ms-user-select:none;    /*IE 10+*/
                  user-select:none;
                }
                .button-new-tag{
                  background-color: transparent;
                  color: #fff;
                  border: 1px solid #fff;
                  font-size: 18px;
                  width: 32px;
                  height: 32px;
                  padding: 0;
                  margin-left: 5px;
                }
              }
              .rules{
                font-size: 12px;
                color: #999;
              }
              
          }
      }
      
      .updata{
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background-color: #282C41;
        /deep/.el-table{
          background-color: #282C41;
        }
        /deep/.el-table .el-table__cell {
          padding: 8px 0;
        }
        /deep/.el-table th.el-table__cell {
            background: #282C41!important;
            color: #fff!important;
        }
        /deep/.el-table tr {
            background-color: #3C4052;
            color: #fff;
        }
        /deep/.el-table_body tr.hover_row>td.el-table_cell{
          background-color: red!important;
        }
        /deep/.el-button--text {
          color: #3FC1FF;
        }

        /deep/.el-tag {
            color: #63E9FF;
            background: linear-gradient(270deg, #3A6176 0%, #38768D 100%);
            border: none;
            border-radius: 2px;
        }
        
        /deep/.el-table__body-wrapper {
            overflow: hidden;
            position: relative;
        }
        /deep/.el-table th.el-table__cell.is-leaf {
          border-bottom: 1px solid #17D3FF;
        }

        /deep/.el-table::before {
            height: 0px;
        }
      }
      tbody tr:hover>td,/deep/ tbody tr.hover-row>td { background-color: rgba(63,193,255,0.2000) }
      .urlSet{
        display: flex;
        align-content: center;
        >img{
          width: 30px;
          height: 30px;
          margin-right: 5px;
        }
      }
      .status-text{
        display: flex;
        align-items: center;
        font-size: 12px;
        >img{
          width: 15px;
          height: 15px;
        }
      }
  }

  .shadeTips{
    position: absolute;
    width: 600px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #282C41;
    color: #fff;
    z-index: 100;
    border-radius: 3px;
    ::-webkit-scrollbar {
        width:2px;
    }
    ::-webkit-scrollbar-track {
        -webkit-box-shadow:inset006pxrgba(255,255,255,0.3);
        border-radius:10px;
    }
    ::-webkit-scrollbar-thumb {
        border-radius:10px;
        background:rgba(255,255,255,.5);
        -webkit-box-shadow:inset006pxrgba(255,255,255,0.5);
    }
    ::-webkit-scrollbar-thumb:window-inactive {
        background:#999;
    }
    .closeTips{
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 22px;
    }
    .title{
      width: 100%;
      height: 50px;
      border-bottom:1px solid #2F86A1 ;
      line-height: 50px;
      padding-left: 20px;
      font-weight: 400;
      box-sizing: border-box;
    }
    .container{
      width: 100%;
      height: 400px;
      padding: 10px 20px;
      box-sizing: border-box;
      background-image: url('../../assets/images/linebright.png');
      background-repeat: no-repeat;
      background-size: 100%;
      /deep/.el-form-item__label {
          color: #fff;
      }
      .listsBox{
        max-height:300px;
        overflow:auto
      }
      .tiplists{
        width: 350px;
        margin-right: 10px;
        /deep/.el-input__inner {
          background-color: #4F5367;
          border-radius: 2px;
          border: 1px solid #7A7F8E;
          color: #fff;
        }
      }
      .addTips{
        width: 350px;
        border-style: dashed;
      }
      .bottom{
        display: flex;
        align-items: center;
        padding-left: 80px;
        box-sizing: border-box;
      }
    }
    .st_bottom{
      background-image: url('../../assets/images/linebright.png');
      background-repeat: no-repeat;
      background-size: 100%;
      position: fixed;
      width: 100%;
      height: 50px;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 20px;
      box-sizing: border-box;
    }
  }

  .previewShade{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    
    .close{
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 26px;
      background-color: #FFF;
      border-radius: 50%;
    }
  }

  .previewShadeMain{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) ;
    z-index: 100;
    .preview{
      
      max-width: 800px;
      max-height: 500px;
    }
  }
}
</style>

<style lang="less">
.confirm {
    width: 420px;
    background-color: #282C41;
    color: #fff;
    border-radius: 2px;
    border: none;
    .el-message-box__content {
      padding: 10px 15px;
      color: #fff;
      font-size: 14px;
    }
    .el-button {
        background-color: transparent;
        border: 1px solid #fff;
        color: #fff;
        border-radius: 2px;
    }
    .el-button--primary {
        color: #63E9FF;
        border: 1px solid #00CEF0;
        background-color: rgba(49, 203, 236, 0.1400);
        border-radius: 2px;
    }
}
</style>